import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";







const NavTopTab = (props:{tabs: string[]; children: React.ReactNode[]}) => {

    const [activeTab, setActiveTab] = useState(1); // 默认选中“发现”
    return (
        <View>
            <View style={styles.tabContainer}>
                {props.tabs.map((tab, idx) => (
                    <TouchableOpacity
                        key={tab}
                        style={styles.tabItem}
                        onPress={() => setActiveTab(idx)}
                        activeOpacity={0.7}
                    >
                        <Text
                            style={[
                                styles.tabText,
                                activeTab === idx && styles.tabTextActive,
                            ]}
                        >
                            {tab}
                        </Text>
                        <View
                            style={[
                                styles.underline,
                                activeTab === idx ? styles.underlineActive : styles.underlineInactive,
                            ]}
                        />
                    </TouchableOpacity>
                ))}
            </View>
            {/* 其他内容 */}
           {props.children[activeTab]}
        </View>
    )
}

const styles = StyleSheet.create({
    tabContainer: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "flex-end",
        paddingTop: 20,
        backgroundColor: "#fff",
    },
    tabItem: {
        alignItems: "center",
        marginHorizontal: 20,
        paddingBottom: 8,
    },
    tabText: {
        fontSize: 14,
        color: "#999",
    },
    tabTextActive: {
        color: "#222",
    },
    underline: {
        marginTop: 2,
        height: 2,
        width: 28,
        backgroundColor: "#f33",
        borderRadius: 10,
    },
    underlineActive: {
        backgroundColor: "#f33",
    },
    underlineInactive: {
        backgroundColor: "transparent",
    },
});


export default NavTopTab;